<script setup lang="ts">
const emit = defineEmits(['close'])
</script>

<template>
  <div class="sidebar-panel is-generic">
    <div class="subpanel-header">
      <ProjectsQuickDropdown />

      <h3 class="no-mb">Layouts</h3>
      <div class="panel-close" @click="emit('close')">
        <i aria-hidden="true" class="iconify" data-icon="feather:x"></i>
      </div>
    </div>
    <div class="inner" data-simplebar>
      <ul>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Lists
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink :to="{ name: 'sidebar-layouts' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-list-alt"></i>
                <span>List View V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-view-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt"></i>
                <span>List View V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-view-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt"></i>
                <span>List View V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-view-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt"></i>
                <span>List View V4</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Flex Lists
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-flex-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt-1"></i>
                <span>Flex List V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-flex-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt-1"></i>
                <span>Flex List V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-flex-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-list-alt-1"></i>
                <span>Flex List V3</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Datatable
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-datatable-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt"></i>
                <span>Datatable V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-datatable-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt"></i>
                <span>Datatable V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-datatable-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt"></i>
                <span>Datatable V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-list-datatable-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt"></i>
                <span>Datatable V4</span>
              </RouterLink>
            </li>
          </ul>
        </li>

        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Form Layouts
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-form-layouts-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-passport"></i>
                <span>Form Layout V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-form-layouts-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-passport"></i>
                <span>Form Layout V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-form-layouts-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-passport"></i>
                <span>Form Layout V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-form-layouts-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-passport"></i>
                <span>Form Layout V4</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-form-layouts-5' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-passport"></i>
                <span>Form Layout V5</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Placeload
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-placeload-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-reload"></i>
                <span>Placeload V1</span>
                <VTag label="v1.2" color="primary" outlined curved />
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-placeload-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-reload"></i>
                <span>Placeload V2</span>
                <VTag label="v1.2" color="primary" outlined curved />
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-placeload-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-reload"></i>
                <span>Placeload V3</span>
                <VTag label="v1.2" color="primary" outlined curved />
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-placeload-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-reload"></i>
                <span>Placeload V4</span>
                <VTag label="v1.2" color="primary" outlined curved />
              </RouterLink>
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Card Grid
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-cards-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Card Grid V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-cards-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Card Grid V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-cards-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Card Grid V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-cards-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Card Grid V4</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Tile Grid
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-tiles-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt-2"></i>
                <span>Tile Grid V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-tiles-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt-2"></i>
                <span>Tile Grid V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-tiles-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt-2"></i>
                <span>Tile Grid V3</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              User Grid
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-users-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-users-alt"></i>
                <span>User Grid V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-users-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-users-alt"></i>
                <span>User Grid V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-users-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-users-alt"></i>
                <span>User Grid V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-grid-users-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-users-alt"></i>
                <span>User Grid V4</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Personal
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-profile-view' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-user-alt"></i>
                <span>Profile</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-profile-edit' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-pencil"></i>
                <span>Edit Profile</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-profile-notifications' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-notification"></i>
                <span>Notifications</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-profile-settings' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-cog"></i>
                <span>Settings</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Pages
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink :to="{ name: 'auth-login-1' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-pointer-right"></i>
                <span>Login v1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'auth-login-2' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-pointer-right"></i>
                <span>Login v2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'auth-login-3' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-pointer-right"></i>
                <span>Login v3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'auth-signup-2' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-crown"></i>
                <span>Signup v1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'auth-signup-3' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-crown"></i>
                <span>Signup v2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'auth-signup-1' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-crown"></i>
                <span>Signup Flow</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-search-results' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-search-alt"></i>
                <span>Search Results</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-search-empty' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-search-alt"></i>
                <span>Empty Search</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Subpages
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-saas-billing' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-credit-card"></i>
                <span>SaaS Billing</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-action-page-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-thunderbolt"></i>
                <span>Action Page V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-action-page-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-thunderbolt"></i>
                <span>Action Page V2</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Projects
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-projects-projects-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Projects V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-projects-projects-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Projects V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-projects-projects-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-grid-alt"></i>
                <span>Projects V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-projects-details' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout"></i>
                <span>Project Details</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-kanban-board' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-layout-alt-1"></i>
                <span>Kanban Board</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Utility
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-utility-account-confirm' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-thunderbolt"></i>
                <span>Confirm Account</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-utility-promotion' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-magnet"></i>
                <span>Promotion Page</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-utility-invoice' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-calculator-alt"></i>
                <span>Invoice</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'status' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-checkmark-circle"></i>
                <span>App Status</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Onboarding
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-welcome' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-door-alt"></i>
                <span>Onboarding Welcome</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-page-1' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-train"></i>
                <span>Onboarding V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-page-2' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-train-alt"></i>
                <span>Onboarding V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-page-3' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-car"></i>
                <span>Onboarding V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-page-4' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-car-alt"></i>
                <span>Onboarding V4</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink
                :to="{ name: 'sidebar-layouts-onboarding-page-5' }"
                class="is-submenu"
              >
                <i aria-hidden="true" class="lnil lnil-train"></i>
                <span>Onboarding V5</span>
              </RouterLink>
            </li>
          </ul>
        </li>
        <li v-has-nested-router-link class="has-children">
          <div class="collapse-wrap">
            <a class="parent-link">
              Error Pages
              <i
                aria-hidden="true"
                class="iconify"
                data-icon="feather:chevron-right"
              />
            </a>
          </div>
          <ul>
            <li>
              <RouterLink :to="{ name: 'error-page-1' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-cross-circle"></i>
                <span>Error 404 V1</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'error-page-2' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-cross-circle"></i>
                <span>Error 404 V2</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'error-page-3' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-cross-circle"></i>
                <span>Error 404 V3</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'error-page-4' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-cross-circle"></i>
                <span>Error 404 V4</span>
              </RouterLink>
            </li>
            <li>
              <RouterLink :to="{ name: 'error-page-5' }" class="is-submenu">
                <i aria-hidden="true" class="lnil lnil-cross-circle"></i>
                <span>Error 500 V1</span>
              </RouterLink>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss">
@import '../../scss/layout/_sidebar-panel.scss';
</style>
